<template>
  <div class="comment">
    <img class="icon" @click="$router.push({ name:'userAccount',query:{ id:detail.user.userId } })"
      :src="detail.user.avatarUrl + '?param=50y50'" alt="">
    <div class="comment-detail">
      <div class="comment-top">
        <div class="reply-user1">
          <div class="content">
            <a @click="$router.push({ name:'userAccount',query:{ id:detail.user.userId } })"
              class="name">{{detail.user.nickname}}:</a>
            {{detail.content}}
          </div>
        </div>
        <div class="reply-user2" v-if="detail.beReplied[0]">
          <div class="reply-comment">
            <a class="reply-name" href>{{detail.beReplied[0].user.nickname}}:</a>
            {{detail.beReplied[0].content}}
          </div>
        </div>
      </div>

      <div class="comment-bottom">
        <div class="time">{{detail.time | commenttimeFormat}}</div>
        <div class="like" @click="isliked">
          <span v-show="!detail.liked" class="iconfont icon-dianzan"></span>
          <span v-show="detail.liked" class="iconfont icon-dianzan1"></span>
          {{detail.likedCount}}
        </div>
        <div class="reply" @click="sendreply">
          <span class="iconfont icon-chakantiezihuifu"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { commentlikeAPI } from "@/api/comment.js";
export default {
  name: "comment",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    detail: {
      require: true,
    },
    id: {
      require: true,
    },
    type: {
      require: true,
    },
  },
  data() {
    //这里存放数据
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      havereply: true,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    sendreply() {
      document.documentElement.scrollTop = 0;
      this.$emit("reply", this.detail.commentId);
    },
    async isliked() {
      //已经点赞，取消点赞
      if (this.detail.liked) {
        await commentlikeAPI(this.id, this.detail.commentId, 0, this.type);
        this.detail.liked = !this.detail.liked;
        this.detail.likedCount -= 1;
      }
      //没有点赞，点赞
      else if (!this.detail.liked) {
        await commentlikeAPI(this.id, this.detail.commentId, 1, this.type);
        this.detail.liked = !this.detail.liked;
        this.detail.likedCount += 1;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang='less'>
.comment {
  border-bottom: 1px solid rgb(223, 223, 223);
  margin: 0 auto;
  width: 900px;
  position: relative;
  display: flex;
  .icon {
    margin: 10px;
    flex-shrink: 0;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    cursor: pointer;
  }
  a {
    text-decoration: none;
    cursor: pointer;
    color: rgb(41, 131, 209);
  }
  a:hover {
    text-decoration: none;
    color: rgb(22, 97, 163);
  }
  .comment-detail {
    display: flex;
    flex-direction: column;
    // 上层，用户评论+回复他人
    .comment-top {
      display: flex;
      flex-direction: column;
      .reply-user1 {
        display: flex;
        margin-left: 10px;

        .content {
          margin-top: 10px;
          margin-left: 5px;
        }
      }
      .reply-user2 {
        width: 800px;
        display: flex;
        padding: 8px;
        background-color: rgb(224, 224, 224);
        border-radius: 5px;
        margin-top: 10px;
        margin-left: 10px;
        .reply-name {
          flex-shrink: 0;
          margin-right: 5px;
        }
        .reply-comment {
          margin-left: 5px;
        }
      }
    }
    //下层，时间+回复点赞按钮
    .comment-bottom {
      display: flex;
      height: 30px;
      margin-bottom: 20px;
      .time {
        position: absolute;
        bottom: 15px;
        left: 80px;
        color: rgb(151, 151, 151);
        font-size: 15px;
      }
      .like {
        position: absolute;
        bottom: 15px;
        right: 50px;
        font-size: 15px;
        color: rgb(102, 102, 102);
        cursor: pointer;
      }
      .reply {
        position: absolute;
        bottom: 17px;
        right: 20px;
        color: rgb(102, 102, 102);
        cursor: pointer;
      }
    }
  }
}
</style>